<template>
    <div style="float:left;width:48%">
        <el-input v-model="value" :disabled="disabled" :placeholder="$t('public.selectPl')" @focus="visible = true" readonly size="small" />
        <el-dialog :visible.sync="visible" :title="$t('inspectionManagement.selectMeasuringTool')" width="1200px" top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" modal-append-to-body append-to-body @close="onClose" @open="onOpen">
            <el-row :gutter="24">
                <el-col :span="19">
                    <div>
                        <el-form :model="searchForm" size="small" label-position="left" label-suffix=":" ref="searchForm" label-width="80px">
                            <el-row :gutter="24">
                                <el-col :span="6">
                                    <el-form-item :label="$t('inventoryManagement.factory')" prop="factoryName">
                                        <el-select filterable v-model="queryParams.factoryName" transfer :placeholder="$t('public.select_holder',{select_holder: $t('inspectionManagement.plantArea')})" style="width:100%;" clearable size="small">
                                            <el-option v-for="(item) in factoryList" @click.native="changeFactory(item)" :key="item.plantId" :label="item.plantName" :value="item.plantName" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item :label="$t('inspectionManagement.measuringToolName')" prop="deviceName">
                                        <el-input v-model="queryParams.deviceName" :placeholder="$t('public.inputPl')" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item :label="$t('inspectionManagement.measuringToolNo')" prop="measuringCode">
                                        <el-input v-model="queryParams.measuringCode" :placeholder="$t('public.inputPl')" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item :label="$t('inspectionManagement.measuringToolType')" prop="gaugeType">
                                        <el-select v-model="queryParams.gaugeType" :placeholder="$t('public.selectPl')" style="width:100%;" clearable size="small">
                                            <el-option v-for="item in gaugelist" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div style="display: flex; justify-content: center">
                                <el-button type="primary" icon="el-icon-search" @click="getList" class="search-btn" size="mini">{{ $t("public.search") }}</el-button>
                                <el-button icon="el-icon-refresh" @click="reset" size="mini">{{ $t("public.reset") }}</el-button>
                            </div>
                        </el-form>
                        <div class="container-table" style="margin-top:10px">
                            <el-table max-height="350" border stripe ref="multipleTable" :key="tableKey" v-loading="loading" :data="gaugeMessageList" @select="selectOne" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55" v-show="multiple" align="center" />
                                <el-table-column :label="$t('public.serialNum')" type="index" width="50" align="center">
                                    <template slot-scope="scope">
                                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column :label="$t('inspectionManagement.measuringToolNo')" align="left" prop="measuringCode" minWidth="120" />
                                <el-table-column :label="$t('inspectionManagement.measuringToolName')" align="left" prop="deviceName" minWidth="160" />
                                <el-table-column :label="$t('inspectionManagement.measuringModel')" align="left" prop="model" minWidth="160" />
                                <el-table-column :label="$t('mtool.gaugeType')" align="left" minWidth="120" prop="gaugeType" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <span>{{formatGaugeType(scope.row.gaugeType)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column :label="$t('inspectionManagement.belongFactory')" align="left" prop="factoryName" minWidth="120" />

                                <el-table-column :label="$t('public.opera')" align="center" width="100" v-if="!multiple">
                                    <template slot-scope="scope">
                                        <a class="action-wrap" @click="choose(scope)" style="color:#5a9eaf">
                                            {{$t('rule.select')}}
                                        </a>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList('pageChange')" layout="total, sizes, prev, pager, next, jumper" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div>

                        <div>
                            <ul>
                                <li class="select-header">已选量具</li>
                                <li v-for="(item,index) in checkDatas" :key="index">{{item.deviceName}} <i class="el-icon-delete" @click="deleteTool(item,index)"></i></li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div slot="footer">
                <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
                <el-button type="primary" @click="submitData" icon="el-icon-check" size="small" v-if="multiple">{{$t('modal.yes')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {listGauge} from '@/api/basic/gauge'
import {listAllFactory} from '@/api/basic/factory'
import {getDicts} from "@/api/basic/dict/data"
export default {
    name: 'MeasuringToolDialog',
    // dicts: ['NYIQC_GAUGE_TYPE'],
    props: {
        value: {
            type: [String, Number, Array, Object],
            default() {
                return ''
            },
        },
        // gauge: {
        //     type: Array,
        //     default: [],
        // },
        disabled: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
        multiple: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            flag: false,
            total: 1,
            checkDatas: [],
            gaugeMessageList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            searchForm: {
                measuringToolName: null,
                measuringToolNo: null,
                measuringToolType: null,
            },
            visible: false,
            loading: false,
            data: null,
            ids: [],
            names: [],
            title: '',
            tableKey: 0,
            searchType: null,
            factoryList: [],
            gaugelist:[]
        }
    },
    created() {
        // this.getFactoryList()
    },
    methods: {
        getFactoryList() {
            listAllFactory().then((res) => {
                this.factoryList = res.data
            })
        },
        deleteTool(item, index) {
            const findItem = this.gaugeMessageList.find((io) => {
                return item.measuringCode === io.measuringCode
            })
            if (findItem) {
                this.$refs.multipleTable.toggleRowSelection(findItem, false)
            }
            this.checkDatas.splice(index, 1)
        },
        submitData() {
            // console.log(this.ids.join(','))
            if (this.ids.length === 0) {
                this.$modal.msgWarning('请至少选择一个量具!')
                return
            }
            let names = []
            let ids = []
            this.checkDatas.forEach((io) => {
                names.push(io.deviceName)
                ids.push(io.measuringCode)
            })
            this.$emit('input', names.join(','))
            this.$emit('blur')
            this.$emit('callback', ids.join(','))
            this.visible = false
        },
        getList() {
            this.loading = true
            listGauge(this.queryParams).then((response) => {
                this.flag = true
                if (response.code == 200 && response.rows) {
                    this.gaugeMessageList = response.rows
                    this.$nextTick(function () {
                        this.gaugeMessageList.forEach((io) => {
                            this.checkDatas.forEach((ko) => {
                                if (io.measuringCode === ko.measuringCode) {
                                    this.$refs.multipleTable.toggleRowSelection(
                                        io,
                                        this.flag
                                    )
                                }
                            })
                        })
                        this.flag = false
                    })

                    this.total = response.total
                    this.loading = false
                }
            })
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        // 窗口打开
        onOpen() {
            this.checkDatas = []
            this.getFactoryList()
            this.getList()
           
            this.getDictslist()
        },
        getDictslist(){
            getDicts('NYIQC_GAUGE_TYPE').then(res=>{

                this.gaugelist=res.data.map(item=>{
                    return {
                        value:item.dictValue,
                        label:item.dictLabel,
                    }
                })
            })
        },
        choose(scope) {
            console.log(scope)
            this.$emit('input', scope.row.deviceName)
            this.$emit('callback', scope.row)
            this.visible = false
        },
        selectOne(e, row) {
            if (e.length === 0) {
                const index = this.checkDatas.findIndex((io) => {
                    return io.measuringCode === row.measuringCode
                })
                this.checkDatas.splice(index, 1)
            } else if (e.length > 0) {
                const index = this.checkDatas.findIndex((io) => {
                    return io.measuringCode === row.measuringCode
                })
                console.log(this.checkDatas)
                console.log(index)
                if (index === -1) {
                    let checkDatas = [...this.checkDatas]
                    checkDatas.push(row)
                    this.checkDatas = checkDatas
                } else {
                    this.checkDatas.splice(index, 1)
                }
            } else {
                let checkDatas = [...this.checkDatas]
                checkDatas.push(row)
                this.checkDatas = checkDatas
            }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            if (this.flag) {
                return
            }
            this.ids = selection.map((item) => item.measuringCode)
            this.names = selection.map((item) => item.deviceName)
            if (selection.length === 0) {
                this.gaugeMessageList.forEach((io) => {
                    for (let i = 0; i < this.checkDatas.length; i++) {
                        if (
                            io.measuringCode ===
                            this.checkDatas[i].measuringCode
                        ) {
                            this.checkDatas.splice(i, 1)
                            i--
                        }
                    }
                })
            } else {
                if (this.gaugeMessageList.length === selection.length) {
                    let checkDatas = [...this.checkDatas]
                    selection.forEach((ko) => {
                        const temp = checkDatas.find((io) => {
                            return io.measuringCode === ko.measuringCode
                        })
                        if (!temp) {
                            checkDatas.push(ko)
                        }
                    })
                    this.checkDatas = checkDatas
                }
            }
            this.single = selection.length != 1
            // this.multiple = !selection.length
        },
        formatGaugeType(e) {
            if (e) {
                let obj = this.gaugelist.find((item) => {
                    return item.value === e
                })
                if (obj) {
                    return obj.label
                } else {
                    return ''
                }
            } else {
                return ''
            }
        },
        // 窗口关闭
        onClose() {},
        handleConfirm() {
            this.visible = false
        },
        // 窗口关闭前执行
        close() {
            this.visible = false
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
ul {
    list-style: none;
    border: 1px solid #dfe6ec;
    min-height: 420px;
    max-height: 420px;
    overflow-y: auto;
    margin: 0px;
    padding: 0px;
}
.select-header {
    font-size: 15px;
    color: #333333 !important;
    font-weight: bold;
    padding-left: 12px;
    border-bottom: 1px solid #dfe6ec;
    background: #f7f8fa !important;
}
li {
    font-size: 12px;
    padding-left: 12px;
    margin: 0px;
    position: relative;
    line-height: 37px;
}
.el-icon-delete {
    position: absolute;
    right: 5px;
    color: red;
    top: 12px;
    font-size: 14px;
    cursor: pointer;
}
</style>
